<template>
	<el-card shadow="never" style="padding-bottom: 0px !important;margin-bottom: 0px !important;height: 100% !important;
				padding-bottom: 0px;border-width: 0px !important;margin: 0;margin-left: 12px;
				border-radius: 7px;
				">
		<el-header style="height: 35px;margin-top: -6px;margin-left: -10px;
		width: 100%;padding-right: 0px;--el-header-height: 50px;
	padding-top: 0px;">
			<div class="left-panel">
			<div class="addtitleTopImg"></div>
			<span class="todotitleadd">资产增长统计</span>
			<!--div class="right-panel">
				<div style="width: 80px;" class="syselect,no-Clear">
					<el-select @change="loadData" size="default" style="width:100%;" v-model="zczztjxl" >
						<el-option v-for="item in searchForm" :key="item.value" :label="item.label" :value="item.value"/>
					</el-select>
				</div>
			</div-->
		</div>
			<div class="right-panel" style="display: block;width: 65%;float:right;">
				<!--div style="width: 80px;" class="syselect,no-Clear">
					<el-select  size="default" style="width:100%;" v-model="zczztjxl" >
						<el-option v-for="item in searchForm" :key="item.value" :label="item.label" :value="item.value"/>
					</el-select>
				</div-->
				<exCustomSelect :currkey="zczztjxl"  @selectchange="selectyear"></exCustomSelect>
				<div  class="assetStatus-threeBox">
					<div :class="statusclass2" @click.stop="changeoption(1)"><span>原值</span></div>
				<div :class="statusclass1" @click.stop="changeoption(0)"><span>数量</span></div>
				
				</div>
				
			</div>
		</el-header>
		<div style="margin-top: 10px;">
			<scEcharts ref="mygrowth" :height="height" :option="option"  @clicks="chartsClick" @legendclick="legendselectchanged"></scEcharts>
		</div>
	</el-card>
</template>

<script>
	import scEcharts from '@/components/scEcharts';
	import ExSelect from "@/components/exSelect/index.vue";
	import tool from "@/utils/tool";
	import globalparam from "@/constant/model/globalparam";
	import exCustomSelect from '@/components/exCustomSelect';


	/**
	 * 引入组件 @/components/scEcharts
	 * 组件内部会自动加载主题 @/components/scEcharts/echarts-theme-T.js
	 * 支持props包括 height，width，option
	 * 组件export百度Echarts所有方法，使用方式: new scEcharts[fun]
	 */

	export default {
		name: 'chart',
		components: {
			scEcharts,
			exCustomSelect
		},
		props: {
			height: { type: String, default: "160px" },
		},
		data() {
			return {
				option: {
					title: {
						text: '',
						textStyle: {
							fontFamily: 'PingFangSC-Regular', // 设置字体类型
							fontSize: 12, // 设置字体大小
							fontWeight: '400', // 设置字体粗细
						}
					},
					grid: {
						top: '7px'
					},
					tooltip: {
						trigger: 'axis',
						textStyle: {
							fontFamily: 'PingFangSC-Regular', // 设置字体类型
							fontSize: 12, // 设置字体大小
						}
					},
					legend: {
						icon: 'rect',
						data: [],
						//selected:{'原值':false},
						textStyle: {
							fontFamily: 'PingFangSC-Regular', // 设置字体类型
							fontSize: 12, // 设置字体大小
							//fontWeight: 'bold', // 设置字体粗细
						}
					},
					xAxis: {
						type: 'category',
						data: [],
						axisLabel: {
							textStyle: {
								fontFamily: 'PingFangSC-Regular', // 设置字体类型
								fontSize: 10, // 设置字体大小
								//fontWeight: 'bold', // 设置字体粗细
							}
						},
						axisLabel: {                                //坐标轴刻度文字的设置
							show: true,                                 //是否显示
							inside: false,                             //坐标轴刻度文字指向        (true表示向上   false表示向下)
							color: 'rgb(45, 55, 72)',                              //坐标轴刻度文字的颜色 
						},
					},
					calculable : true,
					
					yAxis: {
						
						type: 'value',
						
						axisLine: {                                    //坐标轴轴线设置
							show: true,                                  //是否显示坐标轴轴线
							symbol: ['none', 'none'],                  //坐标轴箭头        (可选'none'   'arrow'   ['none','arrow'])
							symbolSize: [8, 8],                         //箭头大小        ([宽度,高度])
							symbolOffset: [0, 7],                      //箭头偏移
							lineStyle: {                                //坐标轴的线
								color: '#D8D8D8',                            //线的颜色
								width: 1.5,                                //线的粗细程度    (用数字表示)
								type: 'solid',                            //线的类型        (可选solid  dotted  dashed)
								opacity:1                              //线的透明度        (用0~1的小数表示)
							}
						},
						axisLabel: {                                //坐标轴刻度文字的设置
							show: true,                                 //是否显示
							inside: false,                             //坐标轴刻度文字指向        (true表示向上   false表示向下)
							rotate: 0,                                 //坐标轴刻度文字的旋转角度
							color: 'rgb(45, 55, 72)',                              //坐标轴刻度文字的颜色                            //坐标轴刻度文字的大小         (用数字表示)
							padding: [5, 0, 2, -5],                    //坐标轴刻度文字的边距        (上右下左)   
							formatter: function (value, index) {
								if (value >= 1000 && value < 1000000) {
									value = value / 1000 + "K";
								} else if (value >= 1000000) {
									value = value / 1000000 + "M";
								}
								return value;
							}       
						},
						
					},
					series: []
				},
				searchForm:[],
				manageDeptIds:tool.current.manageDeptIds(),
				manageAssetCategoryIds:tool.current.manageAssetCategoryIds(),
				zczztjxl:'',
				assetStatisticsRange: '',
				assetStatisticsStatusRange: [],
				currkey:'数量',
				statusclass1:"statusselected",
				statusclass2:"statusselect"
			}
		},
		beforeMount() {

			const currentDate = new Date();
			this.zczztjxl = currentDate.getFullYear();
			for(let i = 0 ; i <= 10 ; i++){
				this.searchForm.push({
					label: this.zczztjxl - i,
					value: this.zczztjxl - i
				})
			}
			this.$cache.data.loadGlobalParam(globalparam.assetStatisticsRange.paramCode).then((res) => {
				this.assetStatisticsRange = res;
				this.$cache.data.loadGlobalParam(globalparam.assetStatisticsStatusRange.paramCode).then((res) => {
					this.assetStatisticsStatusRange = res;
					this.loadData();
				});
			});

		},
		methods: {
			loadData(){
				let barwidth='15px';
				if(window.innerWidth>1600 && window.innerWidth<2500){
					barwidth='20px';
				}else if(window.innerWidth>2500 && window.innerWidth<3500){
					barwidth='25px';
				}
				let queryParams = {};
				this.loading = true;
				this.fomateQueryParams(queryParams,this);
				queryParams.year = this.zczztjxl+'';
				this.$API.asset.asset.assetGrowthStatisticsYear.post(queryParams).then((rsp =>{
					if(rsp.code === 2000){
						this.option.xAxis.data = rsp.data.xaxisData;					
						let charType;
						if(this.currkey=="数量"){
							this.option.title.text="";
							this.option.grid.top="7px";
							charType = 'bar';
							//this.option.legend.selected={"原值":false};
						}else if(this.currkey=="原值"){
							this.option.title.text="";
							this.option.grid.top="7px";
							charType = 'bar';
							charType = 'line';

							//this.option.legend.selected={"数量":false};
						}
						let seriesData=rsp.data.seriesData[this.currkey];
						let seriesDataje=null;
						if(this.currkey=="原值"){
							seriesDataje=new Array();
							seriesData.forEach((value,i1)=>{
								//seriesDataje.push((value/10000).toFixed(2));
								seriesDataje.push((value).toFixed(2));
							});
						}
						let seriess = [];
						seriess.push({
							data:seriesDataje==null?seriesData:seriesDataje,
							type: charType,
							name:this.currkey,
							barWidth: barwidth,
							smooth: true,
						})
						//let lengend = this.option.legend.data;
						
						this.option.series = seriess;
					}
					this.loading = false;
				}));
			},
			fomateQueryParams(queryParams,_this) {
				queryParams.assetStatisticsRange = _this.assetStatisticsRange;
				queryParams.deptIds = _this.manageDeptIds;
				queryParams.assetStatusIds = _this.assetStatisticsStatusRange;
				queryParams.assetCategoryIds = _this.manageAssetCategoryIds;
			},
			chartsClick(params){
				let queryParams = {};
				let month = params.name.substring(0,1);
				let date = new Date(this.zczztjxl, month - 1);
				this.fomateQueryParams(queryParams,this);
				let maxDate = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
				let mouths = month < 10 ? '0'+month : month;
				queryParams.boughtDateStart = this.zczztjxl+''+ mouths+'01';
				queryParams.boughtDateEnd = this.zczztjxl+''+ mouths+''+maxDate;
				this.searchAsset(this.zczztjxl+'年'+params.name,queryParams);
			},
			searchAsset(item,queryParams) {
				let title = "首页资产增长统计"+item+"资产增长明细";
				//跳转到搜索台账页面
				let fromRouteId = this.$TOOL.crypto.MD5(this.$route.path);//当前页面的路由地址
				let key = this.$TOOL.crypto.MD5(title);//可以做为key的关键字段或内容
				/**
				 *  1 = 根据管理部门，根据登录账户管理范围，资产的管理部门在账户管理范围内的显示<br>
				 *  2 = 根据使用部门，根据登录账户管理范围，资产的使用部门在账户管理范围内的显示<br>
				 *  3 = 根据管理部门或使用部门，根据登录账户管理范围，资产的使用部门或管理部门在账户管理范围内的显示<br>
				 *  其它 = 根据管理部门，按台账，根据使用部门或管理部门或借用部门在管理范围内的
				 */
					//设置搜索参数
				let routeParams = {
						id: key,
						title: title,
						showXuli: true,
						fixedParams:{
							assetStatisticsRange:queryParams.assetStatisticsRange,
							deptIds:queryParams.deptIds,
						},//固定搜索参数，打开页面后，用户通过搜索界面的清空按钮无法清除
						searchParams: queryParams
					};
				this.$store.dispatch("addRouteParams", routeParams);
				this.$router.push({
					name: "toAssetList",
					params: {fromRouteId: fromRouteId, key: key}
				});
			},
			legendselectchanged(params){
				this.currkey=params.name;
				this.$cache.data.loadGlobalParam(globalparam.assetStatisticsRange.paramCode).then((res) => {
					this.assetStatisticsRange = res;
					this.loadData();
				});
			},
			selectyear(param){
				this.zczztjxl = param;
				this.$cache.data.loadGlobalParam(globalparam.assetStatisticsRange.paramCode).then((res) => {
					this.assetStatisticsRange = res;
					this.loadData();
				});
			},
			changeoption(val){

				if(val==0){
					this.currkey="数量";
					this.statusclass1="statusselected";
					this.statusclass2="statusselect";
				}else if(val==1){
					this.currkey="原值";
					this.statusclass1="statusselect";
					this.statusclass2="statusselected";
				}
				this.loadData();
			}
		}
	}
</script>

<style>
.xia-app-title{
		color: #141e31;
		font-size: 16px;
		font-weight: 700;
		line-height: 32px;
		top:20px;
		margin-left: 10px;
		margin-top: 30px;
	}
	.symain .el-card__body {
		padding-bottom: 0px !important;
	}

	.syselect{
		line-height: 26px;
		height: 26px;
	}
	.syselect div,.syselect input{
		line-height: 26px;
		height: 26px;
	}

	.no-Clear  .el-input__wrapper:hover .el-input__suffix{
		display: none !important;

	}

	.addtitleTopImg{
		width: 20px;
  height: 20px;
  background: url(../../../../../public/img/addtitleTop.png)
    100% no-repeat;
  background-size: 100% 100%;
  float: left;
	}
	.todotitleadd{
		width: 117px;
    height: 18px;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 14px;
    font-family: PingFangSC-Semibold;
    text-align: left;
    white-space: nowrap;
    margin: 0px 0 0 12px;
    font-weight: 500;
	}

	.assetStatus-threeBox{
		height: 40px;
		align-items: center ;z-index: 500;
		height: 32px;float: right;
		padding-right: 0px;
	}

	.statusselected{
		
		border-radius: 2px;
		height: 20px;
		width: 30px;
		margin-left: 5px;
		margin-top: 5px;
		cursor: pointer;
		float: right;
		  }
		  .statusselected span{
			  width: 20px;
		height: 20px;
		overflow-wrap: break-word;
		color: rgba(0, 56, 216, 1);
		font-size: 15px;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 20px;
		margin-left: 8px;
		  }
	  
		  .statusselect{
			  
		border-radius: 2px;
		height: 20px;
		width: 30px;
		margin-left: 5px;
		margin-top: 5px;
		cursor: pointer;
		float: right;
		  }
	  
		  .statusselect span{
			  width: 20px;
		height: 20px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 13px;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 20px;
		margin-left: 8px;
		  }
</style>
